import { useStore } from '@/hooks';
import { Loading, Timeline } from '@alifd/next';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import LogTimeline from '../LogTimeline';
import { t } from '@lingui/macro';

const TaskLogs = ({ orderId }) => {
  const [logs, setLogs] = useState([]);
  const { scTaskStore: store } = useStore();

  useEffect(() => {
    (async () => {
      const task = await store.getTaskInfo(orderId);
      const data = await store.getLogs(task);
      setLogs(data);
    })();
  }, [orderId]);

  return (
    <Loading visible={toJS(store.loadingLogs)} style={{ width: '100%', height: '100%' }}>
      <LogTimeline
        title={t`任务日志`}
        dataSource={logs}
      />
    </Loading>
  );
};

export default observer(TaskLogs);
